<template>
  <div class="inline-block">
    <Input v-model:value.trim="val" allow-clear :placeholder="placeholder" class="w-full gray" @input="search">
      <template #prefix>
        <SearchOutlined class="searchInput-icon" />
      </template>
    </Input>
  </div>
</template>

<script lang="ts" setup>
import { SearchOutlined } from '@ant-design/icons-vue'
import { Input } from 'ant-design-vue'
import { useDebounceFn } from '@vueuse/core'
import { ref } from 'vue'

const emits = defineEmits(['update:value', 'search'])

const { placeholder, value } = defineProps(['placeholder', 'value'])
const val = ref<''>(value || '')

const startSeacrh = useDebounceFn(() => {
  emits('search')
}, 1500)

const search = () => {
  emits('update:value', val.value)
  startSeacrh()
}
</script>

<style lang="less" scoped>
.searchInput-icon {
  color: #c0c4cc;
  font-size: 18px;
}
</style>
